<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>图表页面</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="../bootstrap-4.6.2/css/bootstrap.min.css"/>
    <script src="../jquery/jquery-3.6.0.min.js"></script>
    <script src="../jquery/jquery.cookie.js"></script>
    <script src="../bootstrap-4.6.2/js/bootstrap.min.js"></script>
    <script src="../echarts/echarts.js"></script>
    <style>
        body {
            /* CSS3 抗锯齿形 让文字显示的更加清晰 */
            -webkit-font-smoothing: antialiased;
            background-color: #fff;
            font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
            color: #666
        }

        #echarts {
            width: 500px;
            height: 500px;
            float: left;
        }

        .support {
            height: 100px;
            margin: 0 auto;
        }

        #echarts2 {
            width: 500px;
            height: 500px;
            float: right;
        }

        .clearfix:after {
            visibility: hidden;
            clear: both;
            display: block;
            content: ".";
            height: 0
        }

        .clearfix {
            *zoom: 1
        }

        #title {
            text-align: center;
        }
        .deatil{
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container">
    <div id="title" class="title">

    </div>
    <div style="height: 500px;margin: 50px 0">
        <div id="echarts">

        </div>
        <div id="echarts2">

        </div>
    </div>
    <div style="margin: 10px 0" class="support">
        <button style="float: left" class="btn btn-primary" onclick="support()">支持</button>
        <button onclick="noSupport()" style="float:right" class="btn btn-danger">不支持</button>
    </div>
    <div id="deatil" class="deatil">

    </div>
    <div style="text-align: center">
        <a class="btn btn-primary" href="program.jsp">返回上一页</a>
    </div>
</div>

</body>
<script>
    getEcharts();

    function getEcharts() {
        let eid = $.cookie("eid");
        $.ajax({
            url: "http://localhost:8080/getEventByEid",
            type: "POST",
            data: {
                eid: eid,
            },
            dataType: "json",
            success: function (json) {
                if (json.code == 200) {
                    $("#title").empty();
                    $("#title").append("<h2>" + json.data.eName + "</h2>");
                    $("#deatil").empty();
                    $("#deatil").append("<h4> 投票截止时间为:"+json.data.eTime+"</h4>");

                    var myChart = echarts.init(document.getElementById('echarts'));
                    // 指定图表的配置项和数据
                    var option = {
                        xAxis: {
                            data: ['支持', '不支持']
                        },
                        yAxis: {},
                        series: [
                            {
                                type: 'bar', data: [Number(json.data.supNum), {
                                    value: Number(json.data.noSup),
                                    // 设置单个柱子的样式
                                    itemStyle: {
                                        color: '#91cc75',
                                        shadowColor: '#91cc75',
                                        borderType: 'dashed',
                                        opacity: 0.5
                                    }
                                },]
                            },
                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                    var myChart2 = echarts.init(document.getElementById('echarts2'));
                    // 指定图表的配置项和数据
                    var option2 = {
                        series: [
                            {
                                type: 'pie',
                                data: [
                                    {
                                        value: Number(json.data.supNum),
                                        name: '支持'
                                    },
                                    {
                                        value: Number(json.data.noSup),
                                        name: '不支持'
                                    },
                                ]
                            }
                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart2.setOption(option2);
                }
            }
        });

    }

    function support() {
        let eid = $.cookie("eid");
        let sid=$.cookie("sid")
        $.ajax({
            url: "http://localhost:8080/supportEventServlet",
            type: "POST",
            data: {
                eid: eid,
                support: 'support',
                sid:sid,
            },
            dataType: "json",
            success: function (json) {
                if (json.code == 200) {
                    alert(json.msg);
                    location.reload();
                } else {
                    alert(json.msg);
                }
            }
        });
    }

    function noSupport() {

        let eid = $.cookie("eid");
        let sid=$.cookie("sid")
        $.ajax({
            url: "http://localhost:8080/supportEventServlet",
            type: "POST",
            data: {
                eid: eid,
                support: 'no',
                sid:sid,
            },
            dataType: "json",
            success: function (json) {
                if (json.code == 200) {
                    alert(json.msg);
                    location.reload();
                } else {
                    alert(json.msg);
                }
            }
        });
    }
</script>
</html>
